<template>
    <div class="sliderbar" ref="sliBar" >
       <ul ref="sliWap">
           <li v-for="(item,index) in fenList" 
           :key="index" 
           :style="{color:currentindex==index?'#eb4450':'#333',background:currentindex==index?'#fff':'#f4f4f4'}" 
           @click="changData(item,index)"
           >
             {{item.cat_name}}
           </li>
       </ul>
    </div>
</template>

<script>
import {getFen} from "../../api/fenlei/index.js"

export default {
    name: 'DSliderBar',
    data(){
        return{
            fenList:[],
            currentindex:0,
        }
    },

     created(){
        getFen().then(res=>{
            console.log(res.data.message);
            this.fenList=res.data.message
            this.$emit('emitData',this.fenList[0])
        })
    },
    methods:{
        changData(v,i){
            this.currentindex=i
            this.$emit('emitData',v)
        }
    }
   
    /*
   mounted(){
       let sY,nY 
       this.$refs.sliBar.ontouchstart=function(e){
           console.log(e.targetTouches[0].clientY);
           sY=e.targetTouches[0].clientY
       }
       
       this.$refs.sliWap.ontouchend=(e)=>{
            console.log(e.changedTouches[0].clientY);
            nY=e.changedTouches[0].clientY
            if(Math.abs(nY - sY) > 5){
                var t=this.$refs.sliWap.offsetTop
                var nT=nY - sY +t
                if(nT>0){
                    nT=0
                }
                this.$refs.sliWap.style.top=nT +"px"
            }
       }
   }*/
};
</script>

<style lang="less" scoped>
    .sliderbar{
        width:100%;
        height:100%;position:relative;
        ul{
            width:100%;
            position:absolute;
            top:0;
            left:0;
            li{
                text-align:center;
                width:100%; line-height:50px;border-bottom:1px solid #eee;
                background:#f4f4f4;
            }
        }
    }
</style>